<template>
  <div class="dashboard">
    <el-row :gutter="20" class="mb-20">
      <el-col :span="6" v-for="item in statsData" :key="item.title">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-icon" :style="{ backgroundColor: item.color }">
              <el-icon :size="24">
                <component :is="item.icon" />
              </el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-value">{{ item.value }}</div>
              <div class="stats-title">{{ item.title }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-card title="访问趋势">
          <template #header>
            <span>访问趋势</span>
          </template>
          <div class="chart-container">
            <div class="chart-placeholder">
              <el-icon :size="48" color="#ccc">
                <TrendCharts />
              </el-icon>
              <p>图表区域（可集成 ECharts）</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card title="系统信息">
          <template #header>
            <span>柱状图</span>
          </template>
          <div class="system-info">
            <div class="info-item" v-for="item in systemInfo" :key="item.label">
              <span class="info-label">{{ item.label }}：</span>
              <span class="info-value">{{ item.value }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row class="mt-20">
      <el-col :span="24">
        <el-card title="最近活动">
          <template #header>
            <span>最近活动</span>
          </template>
          
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 统计数据
const statsData = ref([
  {
    title: '全部交易',
    value: '1,234',
    icon: 'User',
    color: '#409eff'
  },
  {
    title: '入账交易',
    value: '856',
    icon: 'View',
    color: '#67c23a'
  },
  {
    title: '出账交易',
    value: '2,468',
    icon: 'ShoppingCart',
    color: '#e6a23c'
  },
  {
    title: '成功交易',
    value: '¥12,345',
    icon: 'Money',
    color: '#f56c6c'
  }
])

// 系统信息
const systemInfo = ref([
  { label: '操作系统', value: 'Windows 11' },
  { label: 'Node.js版本', value: 'v18.17.0' },
  { label: 'Vue版本', value: 'v3.3.4' },
  { label: '运行时间', value: '7天 12小时 30分钟' },
  { label: '内存使用', value: '256MB / 1GB' },
  { label: 'CPU使用率', value: '15%' }
])


</script>

<style scoped>
.dashboard {
  padding: 0;
}

.stats-card {
  height: 120px;
}

.stats-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.stats-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-right: 20px;
}

.stats-info {
  flex: 1;
}

.stats-value {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.stats-title {
  font-size: 14px;
  color: #666;
}

.chart-container {
  height: 300px;
}

.chart-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
}

.chart-placeholder p {
  margin-top: 10px;
  font-size: 14px;
}

.system-info {
  padding: 10px 0;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  color: #666;
  font-weight: 500;
}

.info-value {
  color: #333;
}
</style>